// 轴边距
import React from 'react';
import { InputNumber } from 'antd';
import FormItem from 'antd/lib/form/FormItem';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const WheelBase = ( props: IProps ) => {
	const { form, onValuesChange, config } = props;
	const onBlur = ( value: any, name: string ) => {
		onValuesChange( config.type, config.key, { [name]: form.getFieldsValue()[name] }, 'style' );
	};
	return (
		<div>
			<FormItem label="左边距" name="chartLeftPadding" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber
					onBlur={( value ) => onBlur( value, 'chartLeftPadding' )}
					onPressEnter={( value ) => onBlur( value, 'chartLeftPadding' )}
					style={{ width: '100%' }}
					placeholder="单位px"
				></InputNumber>
			</FormItem>
			<FormItem label="右边距" name="chartRightPadding" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber
					onBlur={( value ) => onBlur( value, 'chartRightPadding' )}
					onPressEnter={( value ) => onBlur( value, 'chartRightPadding' )}
					style={{ width: '100%' }}
					placeholder="单位px"
				></InputNumber>
			</FormItem>
			<FormItem label="上边距" name="chartTopPadding" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber
					onBlur={( value ) => onBlur( value, 'chartTopPadding' )}
					onPressEnter={( value ) => onBlur( value, 'chartTopPadding' )}
					style={{ width: '100%' }}
					placeholder="单位px"
				></InputNumber>
			</FormItem>
			<FormItem label="下边距" name="chartBottomPadding" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber
					onBlur={( value ) => onBlur( value, 'chartBottomPadding' )}
					onPressEnter={( value ) => onBlur( value, 'chartBottomPadding' )}
					style={{ width: '100%' }}
					placeholder="单位px"
				></InputNumber>
			</FormItem>
		</div>
	);
};

export default React.memo( WheelBase );
